<template>
  <view class="login-container">
    <view class="login-content">
      <view class="login-form-content">
        <view class="login-title">智憬AI</view>
        <view class="input-item flex align-center">
          <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
        </view>
        <view class="input-item flex align-center">
          <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
        </view>
        <button @click="handleLogin" type="primary" class="action-btn login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { getCodeImg, login } from '@/api/login';
  import { useUserStore } from '@/store/user';
  import { ref } from 'vue';
  import { useShowLoading } from '@/hooks/useShowLoading';

  const userStore = useUserStore();

  // 验证码开关
  const captchaEnabled = ref(false);
  const loginForm = ref({
    username: '',
    password: '',
    code: '',
    uuid: ''
  });
  const checked = ref(false);
  onLoad(() => {
    getCode();
  });

  // 获取图形验证码
  function getCode() {
    getCodeImg()
    .then(res => {
      loginForm.value.uuid = res.uuid || ''
    });
  }

  // 登录方法
  const [handleLoginLoading, cancelLoginLoading] = useShowLoading(true);
  async function handleLogin() {
    if (loginForm.value.username === '') {
      uni.showToast({ title: '请输入账号', icon: 'none' });
    } else if (loginForm.value.password === '') {
      uni.showToast({ title: '请输入密码', icon: 'none' });
    } else {
      pwdLogin();
    }
  }

  // 密码登录
  async function pwdLogin() {
    handleLoginLoading({
      title: '登录中...'
    });
    const { username, password, code, uuid } = loginForm.value;
    login( username, password, code, uuid)
      .then(async (res) => {
        console.log('res',res);
        
        userStore.setToken(res.token)
        await userStore.getUserInfo()

        uni.switchTab({
          url: '/pages/chatList/index'
        });

        return Promise.resolve();
      })
      .catch(() => {
        if (captchaEnabled.value) {
          getCode();
        }
      })
      .finally(() => {
        cancelLoginLoading();
      });
  }

</script>

<style lang="scss" scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url('@/static/login/login-bg.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;

    .login-content {
      width: 100%;
      height: calc(100vh - var(--status-bar-height));
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;

      .login-form-content {
        text-align: center;
        padding: 80rpx 0 100rpx;
        background-color: #fff;
        border-radius: 10rpx;
        width: 86%;

        .login-title {
          font-size: 48rpx;
          font-weight: 700;
          padding-bottom: 48rpx;
        }

        .input-item {
          padding: 22rpx 24rpx;
          border-radius: 8rpx;
          background-color: #f5f5f5;
          border: 1rpx solid #eeeeee;
          margin: 44rpx 56rpx;

          .input-icon {
            width: 34rpx;
            height: 35rpx;
          }

          .input {
            width: calc(100% - 34rpx);
            font-size: 28rpx;
            line-height: 40rpx;
            text-align: left;
            padding-left: 15rpx;
          }

          .input-code {
            width: calc(100% - 34rpx - 195rpx);
          }

          .code {
            width: 195rpx;
            height: 100%;
            float: right;
            .code-img {
              width: 195rpx;
              height: 100%;
              border-radius: 46rpx;
            }
          }
        }

        .action-btn {
          width: 80%;
          margin-left: 10%;
        }

        .check-btn {
          margin: 20rpx 0 44rpx 56rpx;
          text-align: left;

          .check-icon {
            width: 33rpx;
            height: 33rpx;
            vertical-align: middle;
          }

          .check-text {
            font-size: 24rpx;
            color: #666666;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
</style>
